<template>

	<view class="equipment">
		<!-- <view class="" :style="'height: '+statusBarHeight+'px;'"></view> -->
		<view class="headtop flex-between">
			<view class="subsection flex-between">
				<view class="subsection_item" :class="current==index?'subsection_activeitem':''"
					@click="rebtn?subchange(index):''" v-for="(item,index) in list1" :key="index">{{item.name}}</view>
			</view>
			<view class="right flex">
				<image src="../../static/addeq.png" @click="$fun.jump(`/pageC/add?current=${current}`)" mode="">
				</image>
				<view class="mask" v-show="isAdd" @tap="isAdd=false">
					<view class="position-add">
						<view class="item-add" @tap="handleScanCode">
							扫码绑定
						</view>
						<view class="item-add" @tap="handleAdd">
							添加设备
						</view>
					</view>
				</view>
				<image src="../../static/boset.png" v-if="activeTab==0" @tap="handleDial" style="margin-left: 30rpx;"
					mode=""></image>
			</view>
		</view>
		<view class="tabline flex-between">
			<view class="tabline_left flex" v-if="activeTab==0" @click="onlineshow=true">
				<view class="">{{onlineName}}</view>
				<image src="../../static/down.png" mode=""></image>
			</view>
			<view class="group_left flex" v-if="activeTab==1" @click="stateshow=true">
				<view class="">{{stateName}}</view>
				<image src="../../static/down.png" mode=""></image>
			</view>
			<view class="group_left flex" v-if="activeTab==1" @click="stateshow1=true">
				<view class="">{{stateName1}}</view>
				<image src="../../static/down.png" mode=""></image>
			</view>
			<view class="tabline_right flex">
				<view class="" v-if="equipmentInfo.totalIncome">总收益{{equipmentInfo.totalIncome||0}}</view>
				<view class="" style="margin-left: 50rpx;" v-if="equipmentInfo.totalIncome">昨日收益 {{equipmentInfo.yesterIncome||0}}</view>
			</view>
		</view>
		<u-picker :show="onlineshow" keyName="title" :closeOnClickOverlay='true' :columns="equipment"
			@cancel="onlineshow=false" @confirm='onlineconfirm'></u-picker>
		<u-picker :show="stateshow" @cancel='stateshow=false' keyName="lable" @confirm="confirm"
			:columns="columns"></u-picker>
		<u-picker :show="stateshow1" @cancel='stateshow1=false' keyName="lable" @confirm="confirm1"
			:columns="columns1"></u-picker>
		<scroll-view scroll-y="true" :style="'height: '+scrollheight+'px;'" @scrolltolower='scrolltolower'>
			<view class="" v-if="!list.length" style="display: flex;justify-content: center;margin-top: 300rpx;">
				<image src="@/static/noneLine.png" mode="heightFix"></image>
			</view>
			<view class="list" v-if="list.length>0 && activeTab==0">
				<view class="list_item" v-for="(item,index) in list" :key="index" @click.stop="jump(`/pageC/equipmentDetail?name=${item.sn}&onlineCode=${item.onlineCode}`)">
					<view class="flex-between">
						<image class="img1" :src="$fun.imgUrl(item.image)" mode=""></image>
						<image class="img2" v-if="item.onlineCode==0" src="../../static/on(1).png" mode=""></image>
						<image class="img2" v-if="item.onlineCode==1" src="../../static/on(2).png" mode=""></image>
						<image class="img2" v-if="item.onlineCode==2" src="../../static/on(3).png" mode=""></image>

					</view>
					<view class="list_name">{{item.addrIspCode}}</view>
					<view class="list_text"><u--text :lines="1" size='11' color='#999999'
							:text="item.system_sn"></u--text>
					</view>
					<view class="list_profit">
						<view class="name">总收益</view>
						<view class="">￥{{item.totalIcome}}</view>
					</view>
					<view class="list_profit">
						<view class="name">昨日收益</view>
						<view class="">￥{{item.income}}</view>
					</view>
					<!-- 	<view class="list_profit">
						<view class="name">今日收益</view>
						<view class="" style="color: #FF3333;">￥{{item.Icome}}</view>
					</view> -->
					<view class="item-bottom flex" v-if="item.pipeType==3">
						<navigator class="item-icon flex"
							@tap.stop="$fun.jump(`/pageC/dialInfo/dialInfo?sn=${item.sn}&netType=${item.netType}`)">
							<!-- <view class="item-icon" @tap=""> -->
							<view class="">
								<u-icon name="minus-circle" color="#0066FF" size="18"></u-icon>
							</view>
							<view class="item-text">
								调整线路
							</view>
							<!-- </view> -->
						</navigator>

						<view class="item-icon flex" @tap.stop="handleDialResult(item)">
							<view class="">
								<u-icon name="question-circle" color="#0066FF" size="18"></u-icon>
							</view>
							<view class="item-text">
								拨号信息
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="list" v-if="list.length>0 && activeTab==1">
				<view class="list_item" v-for="(item,index) in list" :key="index"
					@click.stop="jump(`/pageC/equipment2?ids=${item.id}`)">
					<view class="flex-between">
						<view class="text">
							<view class="b" style="background: red;" v-if="item.online_status === 'offline'"></view>
							<view class="b" v-else></view>
						</view>
						<view class="income" style="font-size: 28rpx;"
							:style="{color:item.state == '服务中' ? '#5cc758':'#E91A4B'}">
							{{item.state}}
						</view>
					</view>
					<view class="list_name">{{item.remark}}</view>
					<view class="list_text"><u--text :lines="1" size='11' color='#999999' :text="item.device"></u--text>
					</view>
					<view class="list_profit">
						<view class="name">总收益</view>
						<view class="">￥{{item.total_income}}</view>
					</view>
					<view class="list_profit">
						<view class="name">昨日收益</view>
						<view class="">￥{{item.income}}</view>
					</view>
					<view class="item-bottom flex">
						<view class="item-icon flex"
							@tap.stop="$fun.jump(`/pageC/testResult/testResult?ids=${item.id}`)">
							<view class="item-text" style="color: #0066FF;">
								测试结果
							</view>
							<view class="">
								<u-icon name="arrow-right" color="#0066FF" size="18"></u-icon>
							</view>
						</view>
						<view class="item-icon flex" @tap.stop="handleDialResult1(item)">
							<view class="item-text" style="color: #0066FF;">
								网络信息
							</view>
							<view class="">
								<u-icon name="arrow-right" color="#0066FF" size="18"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lineModal: false,
				list1: [{
					name: '混跑',
				}, {
					name: '定向',
				}],
				equipment: [
					[{
							title: '全部',
							value: '-1',
							color: '#FFFFFF'
						},
						{
							title: '在线',
							value: '0',
							color: '#00FF00'
						},
						{
							title: '离线',
							value: '1',
							color: '#A0A0A0'
						},
						{
							title: '故障',
							value: '2',
							color: '#FF0000'
						},
					]
				],
				columns: [
					[{
							lable: '已下机'
						},
						{
							lable: '待配置'
						},
						{
							lable: '审核中'
						},
						{
							lable: '服务中'
						},
						{
							lable: '待测试'
						},
						{
							lable: '不通过'
						}
					]
				],
				columns1: [],
				stateshow1: false,
				equipmentInfo: {
					count: 0
				},
				list: [],
				page: 1,
				limit: 10,
				activeIndex: 0,
				activeName: '全部分组',
				activeType: '',
				group_id: -1,
				pipeType: '',
				GroupList: [],
				GroupType: [],
				count: 0,
				activeTab: 0,
				isAdd: false,
				vlan: -1,
				current: 0,
				statusBarHeight: 0,
				stateshow: false,
				onlineName: '',
				onlineCode: '-1',
				onlineshow: false,
				stateName: '',
				stateName1: '',
				stateActive: '',
				scrollheight:0,
				rebtn:true,
				stateCode:0
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.list = []
			if (this.current == 1) {
				this.getBindList()
			} else {
				this.getGroupList()
			}
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			if (this.page != 1) {
				if (this.current == 1) {
					this.getBindList()
				} else {
					this.getGroupList()
				}
			}
		},
		onNavigationBarButtonTap(e) {
			this.$fun.jump('/pageC/add')
		},
		// 分享好友
		onShareAppMessage() {
			return {
				title: '鲸算网云',
				path: JSON.parse(uni.getStorageSync('gitH5Qrcode')),
			}
		},
		// 分享朋友圈
		onShareTimeline() {
			return {
				title: '鲸算网云',
				query: JSON.parse(uni.getStorageSync('gitH5Qrcode')),
			}
		},
		onLoad() {
			this.getGroupList()
			this.getBindscreen()
		},
		onShow() {
			// this.list = []
			this.page = 1
			if (this.current == 1) {
				this.getBindList()
			} else {
				this.getUserSnList(this.page, this.limit)
			}
			const phoneInfo = uni.getSystemInfoSync();
			this.statusBarHeight = phoneInfo.statusBarHeight
			this.scrollheight = uni.getWindowInfo().windowHeight-100
			this.onlineName = this.equipment[0][this.stateCode].title
		},
		onHide() {
			this.isAdd = false
		},
		methods: {
			subchange(index) {
				this.rebtn=false
				setTimeout(()=>{
					this.rebtn=true
				},800)
				this.current = index
				this.activeTab = index
				this.page = 1
				this.list = []
				if (index) {
					this.getBindList()
				} else {
					this.handleTabs(index)
				}
			},
			onlineconfirm(item) {
				this.stateCode = item.indexs
				this.onlineName = item.value[0].title
				this.onlineCode = item.value[0].value
				this.onlineshow = false
				this.page = 1
				this.list = []
				this.getUserSnList(this.page, this.limit)
			},
			confirm(item) {
				this.stateName = item.value[0].lable
				this.stageActive = item.value[0].value
				this.stateshow = false
				this.page = 1
				this.list = []
				this.getBindList()
			},
			confirm1(item) {
				this.stateName1 = item.value[0].lable
				this.stateActive = item.value[0].value
				this.stateshow1 = false
				this.page = 1
				this.list = []
				this.getBindList()
			},
			// 拨号信息
			handleDialResult(item) {
				this.$fun.jump(`/pageC/dialResult/dialResult?sn=${item.sn}&netType=${item.netType}`)
			},
			handleDialResult1(item) {
				if (item.isManager) {
					if (item.diallingtype === "PUBLIC_MULTI_IP") {
						this.$fun.jump(`/pageC/dialResult1/dialResult1?ids=${item.id}`)
					} else {
						this.$fun.jump(`/pageC/dialResult2/dialResult2?ids=${item.id}`)
					}
				} else {
					this.$fun.jump(
						`/pageC/netCard/netCard?ids=${item.id}&type=${item.diallingtype === "PUBLIC_MULTI_IP"? '固定公网多IP' :''}`
					)
				}

			},
			handleScanCode() {
				let _that = this
				//#ifdef H5
				this.$fun.msg('H5暂不支持扫码！')
				//#endif
				// #ifndef H5
				uni.scanCode({
					success: function(res) {
						_that.$fun.jump(`/pageC/add?sn=${res.result}`)
					}
				});
				// #endif
			},
			handleAdd() {
				this.$fun.jump('/pageC/add')
			},
			// 拨号设置
			handleDial() {
				this.$fun.jump('/pageC/DialSetting/DialSetting')
			},
			// 点击tabs
			handleTabs(index) {
				this.page = 1
				this.limit = 20
				if (index == 1) {
					this.pipeType = 3
					this.vlan = 1
				} else {
					this.pipeType = -1
					this.vlan = -1
				}
				this.list = []
				this.getUserSnList(this.page, this.limit)
			},
			//zhutui
			getUserSnList(page, limit) {
				this.$fun.ajax.post('butt/userSnList', {
					page,
					limit,
					onlineCode: this.onlineCode,
					group_id: this.group_id,
					pipeType: this.pipeType,
					vlan: this.vlan
				}).then(res => {
					uni.hideLoading()
					if(this.page>1){
						if(res.data.list.length>0){
							this.list.push(...res.data.list)
							this.page++
						}else{
							this.$fun.msg('没有更多数据了...')
						}
					}else{
						if (res.data.list.length > 0) {							
							this.list = res.data.list
							this.page++
						} else {
							this.list = res.data.list
						}
						this.equipmentInfo = res.data
					}
				})
			},
			async getBindscreen() {
				const res = await this.$fun.ajax.post('bind/getBindscreen')
				this.filterList = res.data
				this.columns1 = [res.data.stage]
				this.columns = [res.data.type]

				this.stateName = this.columns[0][0].lable
				this.stateName1 = this.columns1[0][0].lable
				this.stateActive = this.columns[0][0].value
				this.stageActive = this.columns1[0][0].value
			},
			//定向
			getBindList(page, limit) {
				this.$fun.ajax.post('bind/getBindList', {
					page: this.page,
					limit: this.limit,
					online_status: this.stageActive,
					state: this.stateActive,
					sn: ''
				}).then(res => {
					uni.hideLoading()
					if(this.page>1){
						if(res.data.length>0){
							for (let i = 0; i < this.columns1[0].length; i++) {
								res.data.map((item) => {
									if (item.state == this.columns1[0][i].lable) {
										item.stateName = this.columns1[0][i].value
									}
								})
							}
							this.list.push(...res.data)
							this.page++
						}else{
							this.$fun.msg('没有更多数据了...')
						}
					}else{
						if (res.data.length > 0) {
							this.list = res.data
							this.page++
						} else {
							this.list = res.data
						}
					}
					this.yestoday_income = res.data.yestoday_income
					this.total_income = res.data.total_income
					this.equipmentInfo = res.data
	
				}).catch(() => {
					uni.hideLoading()
				})
			},
			scrolltolower() {
				if (this.page != 1) {
					if (this.current == 1) {
						this.getBindList()
					} else {
						this.getGroupList()
					}
				}
			},
			async getGroupList(onlineCode = -1) {
				await this.$fun.ajax.post('butt/groupList', {
					onlineCode,
				}).then(res => {
					this.GroupList = res.data
					this.count = res.data[0].num
					this.activeName = res.data[0].name
				})
				await this.$fun.ajax.post('butt/typeList', {
					onlineCode,
				}).then(res => {
					this.GroupType = res.data
					this.activeType = res.data[0].name
					this.pipeType = res.data[0].id
				})
				await this.getUserSnList(this.page, this.limit)
			},
			jump(url) {
				this.$fun.jump(url)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F2F4F7;
	}
	.headtop {
		width: 750rpx;
		height: 88rpx;
		padding: 0 30rpx;

		image {
			width: 128rpx;
			height: 48rpx;
		}
		.right{
			position: relative;
		}
	}

	.subsection {
		width: 240rpx;
		background-color: #EBEBEB;
		border-radius: 28rpx;

		&_item {
			width: 120rpx;
			height: 56rpx;
			border-radius: 28rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #999999;
			text-align: center;
			line-height: 56rpx;
		}

		&_activeitem {
			width: 120rpx;
			height: 56rpx;
			background: #FFFFFF;
			border-radius: 28rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
			transition-duration: 0.3s;
			transition-timing-function: ease-in-out;
		}
	}

	.tabline {
		padding: 0 30rpx;
		margin: 26rpx 0 30rpx;

		&_left {
			font-weight: 500;
			font-size: 32rpx;
			color: #333333
		}

		&_right {
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
		}

		image {
			width: 28rpx;
			height: 28rpx;
		}
	}
	.mask {
		background-color: transparent;
		position: absolute;
		z-index: 999;
		top: 100%;
		left: 0;
		width: 100%;
		height: 1000rpx;
	
		.position-add {
			position: absolute;
			z-index: 9999;
			top: 0;
			right: 0;
			background-color: #f9f9f9;
			width: 180rpx;
			color: #000;
			border-radius: 10rpx;
			padding: 5rpx;
	
			.item-add {
				padding: 20rpx 0;
				font-size: 14px;
				font-weight: 600;
				text-align: center;
			}
		}
	}
	.list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		padding: 0 30rpx;

		&_item {
			padding: 20rpx;
			width: 336rpx;
			// height: 482rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 24rpx;
			margin: 0 auto 20rpx;

			.img1 {
				width: 100rpx;
				height: 89rpx;
				margin-bottom: 25rpx;
			}

			.img2 {
				width: 80rpx;
				height: 32rpx;
				margin-right: -20rpx;
			}

			.list_name {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}

			.text {

				display: flex;
				align-items: center;

				.b {
					width: 28rpx;
					height: 28rpx;
					background: #55B953;
					border-radius: 50%;
				}


			}

			.list_text {
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
				margin-bottom: 20rpx;
				width: 296rpx;
				margin-top: 10rpx;
			}

			.list_profit {
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				margin-top: 20rpx;

				.name {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}

			.item-bottom {
				display: flex;
				justify-content: space-between;
				font-size: 12px;
				margin-top: 30rpx;
			}
		}
	}
</style>